class Tab{
    constructor(selector,options){
        this.ele = document.querySelector(selector);
        this.btns = this.ele.querySelectorAll('ul > li');
        this.boxes = this.ele.querySelectorAll('ol > li');
        this.option = options || {}; // 给这个对象增加一个属性 option 
        // 如果传递了 {type:'mouseover'} 那么就给到属性 option
        // 否则把空对象给option 
        this.init()
    }

    init(){
        // 给每个按钮绑定事件
        for(let i=0;i<this.btns.length;i++){
            // 绑定事件在这里
            // {} 空对象  真  
            // 0 NaN '' null undefined false  假
            this.btns[i].addEventListener(this.option.type || 'click',()=>{

                for(let j=0;j<this.btns.length;j++){
                    this.btns[j].classList.remove('active');
                    this.boxes[j].classList.remove('active');
                }
                this.btns[i].classList.add('active');
                this.boxes[i].classList.add('active');
            })
        }
    }
}